import React, {Component, PropTypes} from 'react';
import {observer} from 'mobx-react'
import '../styles/Play.css';
import PlayingList from './PlayingList'
import iconPlay from'../assets/icon-play.png'
import iconPause from '../assets/icon-pause.png'
import jiantou from '../assets/icon-jiantou.png'
import like from '../assets/icon-like.png'
import shangyiqu from '../assets/icon-shangyiqu.png'
import xiayiqu from '../assets/icon-xiayiqu.png'
import list from '../assets/icon-list.png'
import volue_left from '../assets/icon-volue-left.png'
import volue_right from '../assets/icon-volue-right.png'
import share from '../assets/icon-share.png'
import suiji from '../assets/icon-suiji.png'
import xunhuan from '../assets/icon-xunhuan.png'
import black from '../assets/icon-...black.png'

@observer
class Play extends Component {

  constructor(props) {
    super(props)
    this.state = {
      iconPlay: iconPlay,
      iconPause: iconPause,
      clientY: 0,
      playingListShow: false
    }
    this.moveStart = this.moveStart.bind(this)
    this.moveEnd = this.moveEnd.bind(this)
    this.tapButton = this.tapButton.bind(this)
    this.play = this.play.bind(this)
    this.playFront = this.playFront.bind(this)
    this.playNext = this.playNext.bind(this)
    this.closePlay = this.closePlay.bind(this)
    this.showPlayList = this.showPlayList.bind(this)
  }

  moveStart(event) {
    console.log('start' + event.touches[0].clientY)
  }

  moveEnd(event) {
    const {showPlayPage} = this.props
    if (event.changedTouches[0].clientY - this.state.clientY > 0) {
      showPlayPage()
    }
  }

  tapButton(event) {
    event.preventDefault()
    this.play()
  }

  play() {
    const {musicStore} = this.props
    musicStore.play()
  }

  playFront(event) {
    event.preventDefault()
    const {musicStore} = this.props
    musicStore.playFront()
  }

  playNext(event) {
    event.preventDefault()
    const {musicStore} = this.props
    musicStore.playNext()
  }

  closePlay(e) {
    e.preventDefault()
    const {showPlayPage} = this.props
    showPlayPage()
  }
  showPlayList(){
    this.setState({
      playingListShow:!this.state.playingListShow
    })
  }
  render() {
    const {musicStore} = this.props
    return (
      <div id="play" className="music-play-page">
        {
          this.state.playingListShow && <PlayingList musicStore={musicStore} showPlayList={this.showPlayList}/>
        }
        <div className="music-album">
          <div className="play-page-hide-btn" onTouchEnd={this.closePlay} onClick={this.closePlay}>
            <img src={jiantou} alt=""/>
          </div>
          <img src={musicStore.music.coverImgUrl} role="presentation" onTouchStart={
            this.moveStart
          } onTouchEnd={
            this.moveEnd
          }/>
        </div>
        <div className="button-group">
          <img className="blurbg" src={musicStore.music.coverImgUrl} role="presentation"/>
          <div className="progress-bar-group">
            <div className="progress-bar">
              <div className="progress" style={{width: musicStore.indicatorPosition + '%'}}></div>
              <div className="indicater" style={{left: musicStore.indicatorPosition + '%'}}></div>
            </div>
            <div className="time-indicater">
              <span>{musicStore.currentTime}</span>
              <span>{musicStore.duration}</span>
            </div>
          </div>
          <div className="music-info">
            <p className="music-name">{musicStore.music.song.name}</p>
            <p className="music-author">{musicStore.music.song.singer}</p>
          </div>
          <div className="music-ctrl">
            <ul>
              <li><img src={like} role="presentation"/></li>
              <li><img src={shangyiqu} role="presentation" onTouchEnd={this.playFront} onClick={this.playFront}/></li>
              <li><img src={musicStore.music.playing ? this.state.iconPause : this.state.iconPlay} role="presentation"
                       onTouchEnd={this.tapButton} onClick={this.tapButton}/></li>
              <li><img src={xiayiqu} role="presentation" onTouchEnd={this.playNext} onClick={this.playNext}/></li>
              <li><img src={list} role="presentation" onTouchEnd={this.showPlayList} onClick={this.showPlayList}/></li>
            </ul>
          </div>
          <div className="volue-bar-group">
            <div className="volue-icon volue-left">
              <img src={volue_left} role="presentation"/>
            </div>
            <div className="volue-icon volue-right">
              <img src={volue_right} role="presentation"/>
            </div>
            <div className="volue-bar">
              <div className="volue-line">
                <div className="volue"></div>
              </div>
              <div className="value-indicater"></div>
            </div>
          </div>
          <div className="other-button">
            <ul>
              <li><img src={share} role="presentation"/></li>
              <li><img src={suiji} role="presentation"/></li>
              <li><img src={xunhuan} role="presentation"/></li>
              <li><img src={black} role="presentation"/></li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

Play.propTypes = {
  musicStore: PropTypes.object.isRequired,
  showPlayPage: PropTypes.func.isRequired,
}


export default Play;
